<style lang="scss" scoped>
.contact-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background: rgba(0,0,0,.2);
}
.contact-content {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	z-index: 1000;
	background: white;
	padding: 60upx 40upx 80upx;
	box-sizing: border-box;
	border-radius: 20upx 20upx 0 0;

	.tel-wrap {
		display: inline-flex;
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
		justify-content: center;
		align-items: center;
		margin-bottom: 10upx;
	}
}

</style>

<template>
	<view class="contact-overlay" v-if="show" @click="clickOverlay"></view>
	<view class="contact-content" v-if="show">
		<view text-sm text-center> 
			<text class="c-blue-4">♥‿♥ </text>
			联系时请告知对方是通过汇塑云商获取到的信息
		</view>
		<view text-center pt-8 pb-6>
			<text class="tel-wrap bg-blue-1" @click="phoneCall">
				<text c-blue-4 text-xl class="icon icon-tel"></text>
			</text>
			<view>电话联系</view>
		</view>
		<view text-xs text-center c-gray-6>
			可用条数{{user.num}}条，点击联系将扣除一条
			<text @click="go('charge')" c-blue-4 underline>去充值</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { makePhoneCall } from '@/common/utils'
	import api from '@/api'
	import { useUserStore } from '@/stores/user'
	const user = useUserStore()

	const props = defineProps({
		phone: {
			type: String,
			default: '12345'
		},
		id: {
			type: String,
			default: ''
		},
		show: {
			type: Boolean,
			default: true
		}
	})
	const emits = defineEmits(['update:show','contacted'])
	const clickOverlay = () => {
		emits('update:show',false)
	}
	const phoneCall = async () => {
		if(!user.num) {
			uni.showToast({
				icon: 'none',
				title: '无可用条数，请先充值'
			})
			return
		}

		makePhoneCall({
			phone: props.phone,
			source: 'askbuy',
			id: props.id,
		})

		await api.requireConsult({
			askbuy_id: props.id
		})
		user.updateNum()
	}



</script>
